<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex-basis</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        
        width: 602px;
        height: 300px;
        margin: 100px auto 0;
        border: 1px black solid;
        /* flex布局 */
        display: flex;

    }

    .item {
        /* text-align: center; */
        /*width: 90px;*/
        height: 50px;
        line-height: 50px;
        /* 第一步：平分剩余空间（伸缩项目分配的剩余空间 = 容器的空间 - 所有项目内容的空间） */
        flex-grow: 1;
        
    }

    .item:first-child {
        background-color: #f40;
        /*第二步：（这块是讲给具体长度的情况）虽然内容少，但是就想多占地方，这里可以给他设置宽度*/
        /* width: 150px; */
        /*当然除了设置宽度以外，我们也可以使用flex-basis进行设置,flex-basis:150px;效果和之前设置width没变化,当然这里的单位可以是 px % rem等都可以*/
        flex-basis:150px;
        /* flex-basis:40%; */
        /* flex-basis:12rem; */
        /* 到这里的话，大家就应该可以理解了，伸缩项目分配的剩余空间= 容器的空间 - basis设置的空间(比如这里的 150px) - 其他的内容占的空间 */
        flex-grow: 2;
    }

    .item:nth-child(2) {
        background-color: lightblue;
        /* 第三步：flex-basis 的默认取值是auto, 如果主轴方向是水平方向(row)，如果flex项目没设置宽度(width),那么它默认的宽度是 项目内容占据的宽度为准；如果flex项目设置宽度(width)，那么它就是设置的width大小 */
        /*flex-basis: auto;*/
    }

    .item:nth-child(3) {
        background-color: greenyellow;
        /* 第四步：flex-basis 的值是0的情况, 设置为 0 之后，项目内容就不再 占据空间了，
        这时候的剩余空间为：伸缩项目分配的剩余空间 = 容器的空间 - 第 1 、2、4 三个 项目内容的空间，然后把这些剩余空间平分给四个项目  */
        /*flex-basis: 0;*/
    }

    .item:last-child {
        background-color: plum;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">第一个项目</div>
        <div class="item">第二个项目</div>
        <div class="item">第三个项目</div>
        <div class="item">第四个项目:我的内容多</div>
    </div>
</body>

</html>